<template>
  <div>
    <div class="app">
      <!-- 头部 -->
      <div class="header">
        <div class="logo">
          <span class="spanimg" @click="Jump_path"></span>
          <span class="longspan">{{ comicname }}</span>
        </div>
        <!-- <div class="header-tools">
          <div><span class="ht-btn1"></span></div>
          <div class="header-tools1">
            <span class="ht-btn2"></span>
            <div class="header-tools1-1">
              <div><span class="span1-1"></span><span>书架</span></div>
              <div><span class="span1-2"></span><span>我的</span></div>
            </div>
          </div>
          <div><span class="ht-btn3" @click="Jump_home"></span></div>
        </div> -->
      </div>
      <!-- 之外部分 -->
      <div id="scroller" v-for="item in prelist" :key="item.comic_id">
        <!-- 漫画简介 -->

        <div class="comic-info-content">
          <div class="comic-img">
            <img :src="item.imgurl" alt="" />
          </div>
          <div class="comic-cover2"></div>
          <div class="mask-triangle"></div>
          <div class="img-box">
            <img :src="item.imgurl" />
          </div>
          <div class="comic-info-box">
            <strong class="comic-title">{{ item.comic_name }}</strong>
            <div class="comic-renqi">
              人气：<span>{{ item.heat | playCountNum }}</span>
            </div>
            <div class="author-name">评分：{{ item.score | com }}</div>
          </div>
          <div
            :class="[
              'comic-collect-btn',
              { 'comic-collect-btn1': isp == true },
            ]"
            @click="setisp(item.comic_id)"
          ></div>
          <div class="comic-btn-box">
            <a
              href="javascript:;"
              class="comic-btn btn-read"
              @click="Jump_reading(item.comic_id)"
              >点击阅读</a
            >
          </div>
        </div>
        <div class="comic-style">
          <span>类型：</span>
          <i v-for="ele in item.cartoon_type_list" :key="ele.id"
            >{{ ele.name }}&nbsp;</i
          >
        </div>
        <div class="comic-intro">
          <span>简介：</span>
          {{ item.comic_desc }}
        </div>
        <div class="newest-chapter">
          <div class="newest-top">
            <span class="black-4 chapter-tit">最新章节：</span>
            <p class="chapter vip-ico">{{ item.last_chapter_name }}</p>
            <a href="javascript:;" class="catalogue" @click="Jump_cata">目录</a>
          </div>
        </div>
      </div>
      <!-- 评论区 -->
      <div class="comment-content">
        <div class="comment-tit">
          <span class="black-4 tit">评论区：</span>
          <a href="javascript:;" class="black-4 write" @click="getispl(true)"
            >写评论</a
          >
        </div>
        <ul class="comic-comment-list">
          <li v-for="item in commentlist" :key="item.comment_id">
            <div class="photo-box">
              <img :src="item.face" alt="" />
            </div>
            <div class="ccl-name-box">
              <span class="ccl-name">{{ item.nickname }}</span>
              <span class="tag-vip">{{ item.group_user }}</span>
            </div>
            <div class="comment-info1">
              {{ item.content }}
            </div>
            <div class="comment-time">
              {{ item.create_date }}
            </div>
          </li>
        </ul>
      </div>
      <div class="pl" v-show="ispl">
        <div class="plq">发表您的意见</div>
        <span @click="getispl(false)" class="plsc"></span>
        <div>
          <input
            type="text"
            placeholder="请输入评论"
            v-model="textval"
            @keyup.enter="getpushpl"
          />
        </div>
      </div>
    </div>
    <!-- 底部广告
  <div class="register-download">

        </div> -->
  </div>
</template>
<script>
var dayjs = require("dayjs");
dayjs().format();
export default {
  data() {
    return {
      prelist: [],
      commentlist: "", //评论数组
      isp: false,
      ispl: false,
      textval: "",
    };
  },
  props: ["id", "comicname"],
  created() {
    this.getpre();
    this.getcomment();
    if (window.localStorage.getItem("historylist") == null) {
      window.localStorage.setItem("historylist", "[]");
    }
    if (window.localStorage.getItem("Collectionlist") == null) {
      window.localStorage.setItem("Collectionlist", "[]");
    }
    this.init();
  },

  methods: {
    Jump_path() {
      this.$router.go(-1);
    },
    setisp(id) {
      let token = window.localStorage.getItem('token')
      if (!token) {
        this.$router.push({name:'login'})
        return
      }
      this.isp = !this.isp;
      if (this.isp) {
        let Collectionlist = window.localStorage.getItem("Collectionlist");
        Collectionlist = JSON.parse(Collectionlist);
        Collectionlist = Collectionlist.filter((item) => {
          return item.Collectionid != id;
        });
        Collectionlist.push({ Collectionid: id });

        Collectionlist = JSON.stringify(Collectionlist);
        window.localStorage.setItem("Collectionlist", Collectionlist);
      }
      if (!this.isp) {
        console.log(2);
        let Collectionlist = window.localStorage.getItem("Collectionlist");
        Collectionlist = JSON.parse(Collectionlist);
        Collectionlist = Collectionlist.filter((item) => {
          return item.Collectionid != id;
        });
        Collectionlist = JSON.stringify(Collectionlist);
        window.localStorage.setItem("Collectionlist", Collectionlist);
      }
    },
    Jump_reading(id) {
      this.$router.push({ name: "reading" });
      let historylist = window.localStorage.getItem("historylist");
      historylist = JSON.parse(historylist);
      historylist = historylist.filter((item) => {
        return item.historyid != id;
      });
      historylist.push({ historyid: id });

      historylist = JSON.stringify(historylist);
      window.localStorage.setItem("historylist", historylist);
    },

    Jump_cata() {
      this.$router.push({ name: "cata" });
    },
    Jump_home() {
      this.$router.push({ name: "home" });
    },
    init() {
      let Collectionlist = window.localStorage.getItem("Collectionlist");
      Collectionlist = JSON.parse(Collectionlist);
      console.log(Collectionlist);
      Collectionlist.forEach((item) => {
        if (item.Collectionid == this.id) {
          this.isp = true;
        }
      });
    },
    getispl(is) {
        let token = window.localStorage.getItem('token')
      if (!token) {
        this.$router.push({name:'login'})
        return
      }
      this.ispl = is;
    },

    async getpre() {
      const data = await this.$axios({
        url: "https://www.kanman.com/api/getComicInfoAttribute",
        method: "get",
        params: {
          comic_id: this.id,
        },
      });
      this.prelist.push(data.data.data);
      // .then(data=>{
      //     this.prelist=data.data.data
      // console.log(this.prelist);
      // })
      this.$set(
        this.prelist[0],
        "imgurl",
        `https://image.yqmh.com/mh/${this.id}.jpg`
      );
    },
    //获取评论
    getcomment() {
      this.$axios({
        url: "./json/comment.json",
        method: "get",
      }).then((data) => {
        this.commentlist = data.data.data.returnData.commentList;
      });
    },
    getpushpl() {
     
      var now = dayjs(new Date()).format("YYYY-MM-DD :HH:mm:ss");
      this.commentlist.unshift({
        face: "https://avatar.u17i.com/2017/1001/4155791_7cb09ecfd68bf891f2f7b49eab7e34fa_1506866267.big.png",
        nickname: "漫友778",
        group_user: "3",
        create_date: now,
        content: this.textval,
      });
      this.textval = "";
    },
  },

  filters: {
    playCountNum(value) {
      //134567897
      let w = value > 10000 ? value / 10000 : value; //万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万"; //亿计算

      return y;
    },
    com(value) {
      let a = parseInt(value);
      return a;
    },
  },
};
</script>
<style scoped>
/* 头部 */
.app {
  position: relative;
}
.pl {
  position: fixed;
  width: 100%;
  height: 100px;
  bottom: 0;
  left: 0;
  background: rgb(205, 205, 205);
  z-index: 2020;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background: url(../../public/assets/images-index/plbj.png);
  background-size: 100% 100%;
}
.pl input {
  width: 300px;
  height: 30px;
  border-radius: 10px;
  margin-left: 30px;
  margin-top: 5px;
  outline: none;
  border: none;
}
.pl .plq {
  width: 100%;
  height: 40px;
  text-align: center;
  font: 700;
  font-size: 20px;
  line-height: 40px;
}
.plsc {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  top: 10px;
  right: 10px;
  background: url(../../public/assets/images-index/plsc.png);
  background-size: 100% 100%;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 53px;
  background-color: #fff;
  padding: 13px 13px 0 13px;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid #b3b3b3;
  z-index: 999;
}
.logo {
  width: 130px;
  height: 26.5px;
  margin-right: 80px;
  line-height: 26.5px;
}
.spanimg {
  display: inline-block;
  width: 18px;
  height: 30px;
  background: url(../../public/assets/images-index/zjt.png) no-repeat;
  background-size: 70% 70%;
}
.longspan {
  font-size: 18px;
  display: inline-block;
  color: #333;
  margin-left: 12px;
  font-weight: 800;
  position: relative;
  top: -41px;
  left: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* 漫画简介 */
.comic-info-content {
  margin-top: 53px;
  position: relative;
  width: 100%;
  height: 175px;
  border-bottom: 1px solid #f2f2f2;
  color: #fff;
}

.comic-info-content #comic-cover {
  position: absolute;
  width: 100%;
  height: 166px;
  left: 0;
  top: 0;
  z-index: 55;
}
.comic-img {
  position: relative;
  width: 100%;
  height: 166px;
}
.comic-img img {
  filter: blur(20px);
  width: 100%;
  height: 100%;
}
.comic-info-content .comic-cover2 {
  position: absolute;
  width: 100%;
  height: 166px;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.comic-info-content .comic-cover2 {
  position: absolute;
  width: 100%;
  height: 166px;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.comic-info-content .mask-triangle {
  position: absolute;
  bottom: 9px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 0px solid transparent; /*左顶点到上顶点的水平距离*/
  border-right: 375px solid transparent; /*右顶点到上顶点的水平距离*/
  border-bottom: 70px solid #fff; /*底线到上顶点的水平距离*/
}
.comic-info-content .img-box {
  position: absolute;
  width: 119px;
  height: 149.5px;
  top: 14.5px;
  left: 9px;
  border: 1px solid #fff;
  border-radius: 6px;
  overflow: hidden;
}
.comic-info-content .img-box img {
  width: 100%;
  height: 100%;
}
.comic-info-content .comic-info-box {
  position: absolute;
  z-index: 2;
  color: #fff;
  top: 18px;
  left: 142px;
}
.comic-info-content .comic-title {
  display: block;
  height: 26px;
  line-height: 26px;
}
.comic-info-content .comic-info-box .comic-renqi,
.author-name {
  font-size: 12px;
  line-height: 17px;
  margin-top: 15px;
}
.comic-info-content .comic-info-box .comic-renqi span {
  font-size: 12px;
  line-height: 17px;
  color: #ff655d;
}
.comic-info-content .comic-collect-btn {
  position: absolute;
  width: 40px;
  height: 40px;
  background: url(../../public/assets/images-index/v2_collect.png) no-repeat
    center center;
  /* background: url(../../public/assets/images-index/ax2.png) no-repeat center center; */
  background-size: 100% 100%;
  top: 48.75px;
  right: 71px;
  z-index: 3;
  /* border: 1px solid #fff; */
}
.comic-info-content .comic-collect-btn1 {
  background: url(../../public/assets/images-index/ax.png) no-repeat center
    center;
  background-size: 100% 100%;
}
.comic-info-content .comic-btn-box {
  position: absolute;
  top: 120px;
  left: 168px;
  text-align: center;
}
.comic-info-content .comic-btn-box .comic-btn {
  display: inline-block;
  box-shadow: 0px 5px 10px 0px rgb(29 221 143 / 40%);
  height: 40px;
  text-align: center;
  line-height: 40px;
  width: 170px;
  font-size: 16px;
  border-radius: 20px;
  background: #1ddd8f;
  color: #fff;
}
.comic-style {
  font-size: 14px;
  color: #444;
  line-height: 20px;
  padding: 19px 20px 10px 15px;
}
.comic-intro {
  padding: 0 20px 21px 15px;
  font-size: 14px;
  color: #444;
  line-height: 20px;
  border-bottom: 1px solid #f2f2f2;
}
.comic-intro span,
.comic-style span {
  font-weight: bold;
}
.newest-chapter {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 25px 6.25px 15px;
  border-bottom: 1px solid #f2f2f2;
  line-height: 30px;
  font-size: 13px;
  color: #444;
}
.newest-chapter .newest-top {
  overflow: hidden;
}
.newest-chapter .chapter-tit {
  font-weight: bold;
}
.newest-chapter .chapter-tit,
.newest-chapter .chapter {
  font-size: 14px;
  float: left;
}
.black-4 {
  color: #444;
  font-size: 13px;
}
.newest-chapter .chapter-tit,
.newest-chapter .chapter {
  font-size: 14px;
  float: left;
}
.newest-chapter .catalogue {
  float: right;
  font-size: 14px;
  color: #1ddd8f;
}
a {
  color: #333;
  text-decoration: none;
}
.newest-chapter .catalogue::after {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  background: url(../../public/assets/images-index/rt.png) no-repeat center
    center;
  background-size: 100% 100%;
  margin-left: 3px;
  vertical-align: middle;
  margin-top: -0.8px;
}
/* 尾部广告模块 */
.register-download {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 73px;
  background: url(../../public/assets/images-index/foot.png);
  background-size: 100% 100%;
}
/* 评论区 */
.comment-content {
  box-sizing: border-box;
  padding: 7.5px 23px 56px 15px;
}
.comment-tit {
  overflow: hidden;
  height: 24px;
  line-height: 24px;
}
.comment-tit .tit {
  float: left;
  font-size: 14px;
  font-weight: bold;
}
.comment-tit .write {
  float: right;
  color: #1ddd8f;
  position: relative;
  margin-right: 15px;
  font-size: 14px;
}
ul {
  list-style: none;
}
.comic-comment-list li {
  position: relative;
  box-sizing: border-box;
  width: 345px;
  padding: 19px 10px 15px 50px;
  border-bottom: 1px solid #f2f2f2;
}
.comment-tit .write::after {
  content: "";
  position: absolute;
  width: 12.5px;
  height: 12.5px;
  background: url(../../public/assets/images-index/v2_write.png) no-repeat
    center center;
  background-size: 100%;
  top: 5.5px;
  right: -15px;
}
.photo-box {
  position: absolute;
  width: 42px;
  height: 42px;
  left: 0;
  top: 19px;
  border-radius: 21px;
  overflow: hidden;
}
.photo-box,
.more-btn {
  display: block;
  margin: 0 auto;
  border: 1px solid #c5c5c5;
  line-height: 43px;
  font-size: 16px;
  color: #444;
  text-align: center;
}
.photo-box img {
  width: 100%;
  height: auto;
}
.ccl-name {
  color: #999;
  font-size: 13px;
  height: 18px;
  line-height: 18px;
}
.tag-vip {
  box-sizing: border-box;
  display: inline-block;
  width: 26px;
  height: 18px;
  padding: 1.5px 0px 0px 12.75px;
  color: #fff;
  font-size: 12px;
  margin-top: 5.25px;
  margin-left: 1.875px;
  line-height: 15px;
  background-image: url(../../public/assets/images-index/center_sprite.png);
  background-size: 290px auto;
  background-repeat: no-repeat;
  background-position: -1px -15px;
  vertical-align: middle;
}
.comment-info1 {
  width: 285px;
  font-size: 14px;
  color: #444;
  margin: 12.5px 0px 0px;
  line-height: 25px;
  word-break: break-all;
  max-height: 125px;
  position: relative;
  overflow: hidden;
}
.comment-time {
  font-size: 12px;
  line-height: 10px;
  margin: 10px 0px 0;
  color: #999;
}
</style>